<template>
  <div class="app">
    <!-- 头部-->
      <el-header>
      <div class="head">
     <el-row align="middle" justify="center" type="flex">
      <el-col :span="6">
        <img src="../assets/image/bolema_logo.png" class="logo" />
      </el-col>
      <el-col :span="13">
        <el-row align="middle" justify="center" :gutter="30">
          <el-col :span="2" class="content" :push="2">首页</el-col>
          <el-col :span="2" :push="2" class="content">班级</el-col>
          <el-col :span="2" :push="2" class="content">考试</el-col>
          <el-col :span="2" :push="2" class="content">课程</el-col>
          <el-col :span="2" :push="2" class="content">题库</el-col>
          <el-col :span="2" :push="2" class="content">上课</el-col>
          <el-col :span="4" :push="2" class="content">进度计划表</el-col>
          <el-col :span="4" :push="2" class="content">进度计划管理</el-col>
          <el-col :span="3" :push="2" class="content">|</el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <div>
        <el-avatar src="http://b-ssl.duitang.com/uploads/item/201511/21/20151121171107_zMZcy.jpeg"></el-avatar>
        <span class="teacher">康子娟^</span>
        </div>
      </el-col>
    </el-row>
    </div>
    </el-header>
    <!-- 主体内容背景-->
    <div class="main">
      <!-- 侧边栏-->
      <div class="people">
        <el-avatar src="http://b-ssl.duitang.com/uploads/item/201511/21/20151121171107_zMZcy.jpeg" class="avatar"></el-avatar>
        <span class="txt">康子娟^</span>
        <div class="txt1">暂未设置个人标签</div>
        <el-button class="btn">去上课</el-button>
        <div class="my">
          <i class="el-icon-lock size pass"></i>
          <span class="size">修改密码</span>
          <i class="el-icon-chat-line-round size news"></i>
          <span class="size">我的消息</span>
        </div>
      </div>
      <div class="aside">
        <el-container>
         <el-aside :width="width">
          <div class="side-navs">
            <el-row>
              <el-col>
            <el-menu
              @select="changeRoute"
              default-active="1"
              background-color="white"
              text-color="black"
              active-text-color="rgb(19,139,238)">
              <el-menu-item index="1">
                <i class="el-icon-s-home"></i>
                <span slot="title">个人中心</span>
              </el-menu-item>
              <el-menu-item index="101">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">添加考试</span>
              </el-menu-item>
             <el-menu-item index="102">
               <i class="el-icon-collection"></i>
               <span slot="title">添加课程</span>
             </el-menu-item>
             <el-menu-item index="103">
               <i class="el-icon-folder"></i>
               <span slot="title">添加模板</span>
             </el-menu-item>
             <el-menu-item index="104">
               <i class="el-icon-edit-outline"></i>
               <span slot="title">添加计划</span>
             </el-menu-item>
             <el-menu-item index="105">
               <i class="el-icon-document"></i>
               <span slot="title">学习报告</span>
             </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
         </div>
         </el-aside>
         <div class="rightContent">
           <router-view></router-view>
         </div>
         </el-container>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      width: '100%'
    }
  },
  components: {

  },
  methods: {
    changeRoute (index) {
      console.log(index)
      let map = new Map()
      map.set('1', '/home')
      map.set('101', '/exam')
      map.set('102', '/addCourse')
      map.set('103', '/addPlan')
      map.set('104', '/OrderInfor')
      let routeUrl = map.get(index)
      this.$router.push(routeUrl)
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  @import '../assets/style/common.scss';
  .app {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    .head {
      width: 100%;
      height: 65px;
      box-shadow: 0px 3px 3px rgba(0, 0, 0, .15);//水平位置，垂直位置，模糊半径，阴影颜色
      background: rgb(19,139,238);
      .logo {
        width: 150px;
        height: 60px;
        float: right;
      }
      .content {
        font-size: 15px;
        color: white;
      }
      .content:active {
        font-size: 16px;
        font-weight: 600;
        color: rgb(252,200,0);
        border-bottom: rgb(252,200,0) 2px solid;
      }
      .teacher {
        position: absolute;
        font-size: 12px;
        color: white;
        margin-left: 20px;
        margin-top: 15px;
      }
    }
    .main {
      position: absolute;
      margin-top: 5px;
      width: 100%;
      height: 91.2%;
      background: rgb(245,247,249);
      overflow-y: auto;
      .people {
        position: absolute;
        margin-top: 16px;
        margin-left: 180px;
        width: 16%;
        height: 33%;
        background: white;
        .avatar {
          width: 80px;
          height: 80px;
          margin-top: 20px;
          margin-left: 80px;
        }
        .txt {
          position: relative;
          font-size: 13px;
          font-weight: 600;
          margin-left: -67px;
          top: 10px;
        }
        .txt1 {
          margin-top: 15px;
          margin-left: 77px;
          font-size: 10px;
          color: #999;
        }
        .btn {
          background: rgb(26,139,242);
          color: white;
          width: 180px;
          height: 22px;
          margin-left: 35px;
          margin-top: 10px;
        }
        .my {
          position: absolute;
          bottom: 0px;
          border-top: 1px solid rgb(240,240,240);
          width: 100%;
          height: 40px;
          .size {
            font-size: 11px;
            color: rgb(102,102,102);
          }
          .pass {
            margin-left: 40px;
            margin-top: 15px;
          }
          .news {
            margin-left: 40px;
            color: rgb(255,199,0);
          }
        }
      }
      .aside {
        position: absolute;
        margin-top: 253px;
        margin-left: 180px;
        width: 16%;
        height: 67%;
        background: white;
        .rightContent {
          position: absolute;
          margin-top: -237px;
          margin-left: 260px;
          width: 900px;
          height: 200%;
          background: white;
        }
      }
    }
  }
</style>
